<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<style>
			.col-xs-9{
				display: block;
				width: 100%;
				clear: both;
			}
			#box_,#box_2 {
				position:relative;
				width:200px;
				height:50px;
				border:1px solid transparent;
				float:left;
			}
			#bg_ ,#bg_2{
				height:10px;
				margin-top:11px;
				border:1px solid #ddd;
				border-radius:5px;
				overflow:hidden;
			}
			#bgcolor_,#bgcolor_2 {
				background:#f3f3f3;
				width:100px;
				height:10px;
				border-radius:5px;
			}
			#bt_,#bt_2 {
				width:35px;
				height:35px;
				background-color:rgb(243,243,243);
				border-radius:17px;
				overflow:hidden;
				position:absolute;
				left:80px;
				margin-left:-12px;
				border:1px solid #d0cbcb;
				top:-2px;
				cursor:pointer;
			}
			#text_xa_,#text_xa_2{
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
			#text_xa,#text_xa2 {
				width:100px;
				margin:0 auto;
				font-size:14px;
				padding-left:10px;
				padding-top:2px;
				line-height:2em;
				float:left;
			}
		</style>
	</head>
	<body oncontextmenu="return false" onselectstart="return false">
	
	    <div style="width:100%;" class="abgs_a">
	        <form class="form-horizontal col-sm-12" role="form">
	            <div class="form-group label_a div_left">
	                <div class="col-sm-4 col-xs-9">
	                    <div id="text_xa_">安卓:50%</div>
	                    <div id="box_">
	                        <div id="bg_">
	                            <div id="bgcolor_"></div>
	                        </div>
	                        <div id="bt_"></div>
	                    </div>
	                    <div id="text_xa">苹果:50%</div>
	                </div>
	            </div>
	        </form>
	    </div>
		
		 <!--
        	模块二
        -->
	    <div class="col-xs-9">
            <div id="text_xa_2">安卓:50%</div>
            <div id="box_2">
                <div id="bg_2">
                    <div id="bgcolor_2"></div>
                </div>
                <div id="bt_2"></div>
            </div>
            <div id="text_xa2">苹果:50%</div>
        </div>
        
		<script src="../../../js/jquery-1.12.1.min.js"></script>
		<script type="text/javascript">
			
			;(function($,d){
				function Progress(options){
					var This = this;
					this.opts = $.extend({},Progress.DEFULT,options);
					this._click();
					if (This._hasTouch()) {
						
						this.opts.btn.on("touchstart",function(e){
							var e = e||window.event;
							This._touchstart(e);
						})
						
					}else{
						this.opts.btn.mousedown(function(e){
							var e = e||window.event;
							This._mousedown(e);
						})
					}
				}
				
				Progress.DEFULT = {//设置默认参数
					statu:false,
				    ox : 0,
				    lx : 0,
				    left : 100,
				    bgleft : 0
				}
				
				Progress.prototype._hasTouch = function(){
					var touchObj={};
				    touchObj.isSupportTouch = "ontouchend" in document ? true : false;
				    return touchObj.isSupportTouch;
				}
				
				Progress.prototype._mousedown = function(e){
					var This = this;
					this.opts.lx = this.opts.btn.offset().left;
				    this.opts.ox = e.pageX - this.opts.left;
				    this.opts.statu = true;
				  	$(d).on('mousemove',function(e) {
				      	var e = e||window.event
				      	This._mousemove(e);
				    });
				    $(d).on("mouseup",function(){
				      	This._Eventend();
				    });
				},
				Progress.prototype._touchstart = function(e){
					var This = this;
				    var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			        this.opts.lx = this.opts.btn.offset().left;
				    this.opts.ox = touch.pageX - this.opts.left;
				    this.opts.statu = true;
				    
				   	$(d).on('touchmove',function(e) {
				      	var e = e||window.event
				      	This._touchmove(e);
				    });
				    $(d).on("touchend",function(){
				      	This._Eventend();
				    });
				},
				
				Progress.prototype._mousemove = function(e){
					if (this.opts.statu) {
			            this.opts.left = e.pageX - this.opts.ox;
			            if (this.opts.left < 0) {
			                this.opts.left = 0;
			            }
			            if (this.opts.left > 200) {
			                this.opts.left = 200;
			            }
			            this.opts.btn.css('left',this.opts.left);
			            this.opts.bgcolor.width(this.opts.left);
			            this.opts.text.html('安卓:' + parseFloat(this.opts.left / 2).toFixed(2) + '%');
			            this.opts.text_xa.html('苹果:' + parseFloat(100 - (this.opts.left / 2)).toFixed(2) + '%');
			      	}
				
				},
				
				Progress.prototype._touchmove = function(e){
					var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
			        if (this.opts.statu) {
			            this.opts.left = touch.pageX - this.opts.ox;
			            if (this.opts.left < 0) {
			                this.opts.left = 0;
			            }
			            if (this.opts.left > 200) {
			                this.opts.left = 200;
			            }
			            this.opts.btn.css('left', this.opts.left);
			            this.opts.bgcolor.width(this.opts.left);
			            this.opts.text.html('安卓:' + parseFloat(this.opts.left / 2).toFixed(2) + '%');
			            this.opts.text_xa.html('苹果:' + parseFloat(100 - (this.opts.left / 2)).toFixed(2) + '%');
			        }
				},
				
				Progress.prototype._Eventend = function(){
					this.opts.statu = false;
				},
				
				Progress.prototype._click = function(){
					var $This = this;
					this.opts.bg.click(function(e) {
						if (!$This.opts.statu) {
				            $This.opts.bgleft = $This.opts.bg.offset().left;
				            $This.opts.left = e.pageX - $This.opts.bgleft;
				            if ($This.opts.left < 0) {
				                $This.opts.left = 0;
				            }
				            if ($This.opts.left > 200) {
				                $This.opts.left = 200;
				            }
				            $This.opts.btn.css('left', $This.opts.left);
				            $This.opts.bgcolor.stop().animate({
				                width: $This.opts.left
				            }, 200);
				            $This.opts.text.html('安卓:' + parseFloat($This.opts.left / 2).toFixed(2) + '%');
				            $This.opts.text_xa.html('苹果:' + parseFloat(100 - ($This.opts.left / 2)).toFixed(2) + '%');
					    }
					});
				}
				
				$.extend({
					progress:function(options){
						new Progress(options);
					}
				});
				
			})(jQuery,document)
		</script>
		<script>
			$(document).ready(function(){
				!(function(){
					var $box = $('#box_');
				    var $bg = $('#bg_');
				    var $bgcolor = $('#bgcolor_');
				    var $btn = $('#bt_');
				    var $text = $('#text_xa_');
				    var $text_xa = $('#text_xa');
				    
				    var options = {
				    	box:$box,
				    	bg:$bg,
				    	bgcolor:$bgcolor,
				    	btn:$btn,
				    	text:$text,
				    	text_xa:$text_xa
				    }
					$.progress(options)
				})();
				
				
				!(function(){
					var $box = $('#box_2');
				    var $bg = $('#bg_2');
				    var $bgcolor = $('#bgcolor_2');
				    var $btn = $('#bt_2');
				    var $text = $('#text_xa_2');
				    var $text_xa = $('#text_xa2');
				    
				    var options = {
				    	box:$box,
				    	bg:$bg,
				    	bgcolor:$bgcolor,
				    	btn:$btn,
				    	text:$text,
				    	text_xa:$text_xa
				    }
					$.progress(options)
				})()
			})
		</script>
	</body>
</html>